<template>
    <div>
        <div class="box">
            <div class="head">
                <p>考试结果展示</p>
            </div>
            <div class="left">
                <div ref="show" style="width:99%;height:500px;margin:0 auto;margin-top: 30px;"></div>
            </div>
            <div class="right">
                <p class="title">答题卡</p>
                <div class="conten">
                    <p><span>错误</span><b></b></p>
                    <p><span>正确</span><b class="two"></b></p>
                    <p><span>未答</span><b class="three"></b></p>
                </div>
                <div class="footer">
                    <ul v-for="(item, index) of question" :key="index">
                        <li :class="changeClass(item.choice, item.correct)">{{ index + 1 }}</li>
                    </ul>
                </div>
                <div class="ts">
                    <span>本次打分: <b>【{{ condition }}】</b></span>
                    <!-- <span>答题所用时间: <b>{{ time }}分钟</b></span>
                    <span>还有 <b>{{ num }}/{{ count }}</b></span> -->

                    <div class="btn">
                        <button @click="onceAgain">再做一次</button>
                        <button @click="exit">退出登陆</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import exam from '@/store/exam/exam'
import * as echarts from 'echarts'
import { mapState } from 'vuex'
export default {
    name: "",
    data() {
        return {
            condition: '不及格',
            question: '',
            time: 40,
            count: 3,
            num: 2,
            sum: 0,
            list: [
                { name: '错误', value: 0 },
                { name: '未答', value: 0 },
                { name: '正确', value: 0 },
            ],
        }
    },
    created() {
        //总题数
        this.sum = this.$store.getters['exam/getListCount']
        //未答题数
        this.list[0].value = this.$store.getters['exam/getNotCentreCount']
        //错误题数
        this.list[1].value = this.sum - this.list[2].value
        //正确提数
        this.list[2].value = this.$store.getters['exam/getCentreCount']
        //获取题目
        this.question = this.$store.getters['exam/getCount']
        //获取时间
        this.time = this.$store.getters['exam/getTime']
        //
        this.count=exam.count

    },
    mounted() {
        this.draw()
    },
    methods: {
        //绘制饼图
        draw() {
            //初始化图表对象
            const chart = echarts.init(this.$refs['show'])

            const option = {
                title: {
                    text: '考试结果图示',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '成绩',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        itemStyle: {
                            borderRadius: 20,
                            borderColor: '#fff',
                            borderWidth: 5
                        },
                        data: this.list,
                        label: {
                            show: true,
                            formatter: '{b}{c}'
                        },
                        emptyCircleStyle: {
                            //无数据时默认显示一个空心圆，对应配置
                            color: 'transparent',
                            borderColor: '#ddd',
                            borderWidth: 1
                        }
                    },
                ]
            }

            //使用配置项渲染图表
            chart.setOption(option)
        },
        // 再来一次
        onceAgain() {
            //还原题目状态
            if(this.num<=0){
                 this.$message({
                    message: '没有答题次数了',
                    type: 'error'
                })
            }else{
                this.num-=1
                this.$store.commit('exam/setNameAnswer')
                this.$router.push({ path: '/exam' })
            }
        },
        //退出登陆
        exit() {
            this.$store.commit('user/clearAll')
            this.$router.push({ path: '/login' })
        },
        //动态样式
        changeClass(choice, correct) {
            return {
                green: choice === correct ? true : false,
                peru: choice === -1 ? true : false,
                red: choice !== correct ? true : false,
            }
        },
        //考试状态
        Examination(params){
            switch (params) {
                case value:break;
            
                default:break;
            }
        },
    },
    components: {
        ...mapState(['exam']),
    },
}
</script>
<style scoped lang="scss">
body {
    height: 100vh;
    overflow: hidden;
}

.box {
    width: 1200px;
    margin: 0 auto;
    margin-top: 50vh;
    transform: translateY(-50%);
    border: 1px solid #ccc;
    height: 560px;

    .head {
        border-bottom: 1px solid #ccc;

        p {
            text-align: center;
            font-size: 20px;

        }
    }

    .left {
        float: left;
        height: 90%;
        width: 49%;
        border-right: 1px solid #ccc;
    }

    .right {
        float: right;
        height: 80%;
        width: 50%;

        .title {
            font-weight: bold;
            font-size: 18px;
            text-align: center;
        }

        .conten {
            width: 21%;
            margin: 0 auto;

            p {
                display: inline-block;
                margin-right: 5px;

                b {
                    display: block;
                    height: 15px;
                    width: 80%;
                    margin: 0 auto;
                    margin-top: 3px;
                    border-radius: 10px;
                    background-color: #cf1322;
                }

                .two {
                    background-color: #52c41a;
                }

                .three {
                    background-color: #13c2c2;
                }
            }
        }

        .footer {
            height: 44%;
            overflow: hidden;
            width: 55%;
            margin: 0 auto;

            ul {
                display: inline-block;
                margin: 0 auto;

                li {
                    border: 1px solid #91d5ff;
                    height: 30px;
                    line-height: 30px;
                    width: 30px;
                    text-align: center;
                    color: white;


                }

                .red {
                    background-color: #cf1322;
                }

                .green {
                    background-color: #52c41a;
                }

                .peru {
                    background-color: #13c2c2;
                }
            }

        }

        .ts {
            width: 80%;
            margin: 0 auto;

            span {
                display: block;
                margin-top: 20px;
            }

            .btn {
                margin-left: 200px;
                margin-bottom: 10px;

                button {
                    border: none;
                    height: 30px;
                    width: 80px;
                    font-size: 15px;
                    color: white;
                    margin-right: 40px;
                    font-weight: bold;
                    border-radius: 5px;
                }

                :nth-child(1) {
                    background-color: #69b1ff;
                }

                :nth-child(2) {
                    background-color: #95de64;
                }
            }
        }

    }
}
</style>